﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>流程设计</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/assets/css/elementui.css">
    <link rel="stylesheet" href="css/apply.css">
    <style>
        .el-row .el-form-item {
            margin-bottom: 0px;
            text-align: center;
            border-right: 1px solid black;
        }

        .el-row {
            border: 1px solid black;
            margin-bottom: -1px !important;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div id="app">
    <div id="fm">
        <el-form >
            <el-row>
                <el-col :span="3">
                    <el-form-item>姓名</el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>性别</el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>出生年月</el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>文化程度</el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>婚否</el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>录用部门</el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>录用时间</el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>岗位</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <el-form-item>
                        {{currentRow.name}}
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        {{currentRow.sex}}
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        {{currentRow.birthTime}}
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-select :disabled="this.instanceId!=''" v-model="currentRow.edu">
                            <el-option v-for="(item,i) in eduOption" :key="i" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>{{currentRow.single==1?'已婚':'未婚'}}</el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>
                        <el-select :disabled="this.instanceId!=''" v-model="currentRow.orgId">
                            <el-option v-for="(item,i) in orgList" :key="i" :label="item.orgName"
                                       :value="item.orgId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-input :readonly="this.instanceId!=''" v-model="currentRow.hireTime"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-input :readonly="this.instanceId!=''" v-model="currentRow.job"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item>面试结论</el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item>
                        <el-input  :readonly="this.instanceId!=''" v-model="currentRow.audition" type="textarea" autosize></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table
                :data="tableData"
                border
                style="margin-top: 1em;">
            <el-table-column
                    prop="stepId"
                    label="步骤"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="orgname"
                    label="组织"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="nickName"
                    label="姓名"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="80">
                <template slot-scope="scope">
                    <span>{{handleStatus(scope.row)}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="action"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button v-if="(getUserId()==scope.row.person)&&(scope.row.status==2)" type="primary" size="mini" @click="handleAction(scope.row)">审核</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="审批时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="comment"
                    label="备注"
                    width="200">
            </el-table-column>
        </el-table>
    </div>
</div>
<script type="text/javascript" src="/assets/module/layer/layer.js"></script>
<script type="text/javascript" src="/assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="/assets/js/sqjx.js"></script>
<script src="/assets/js/vue.min.js"></script>
<script src="/assets/js/elementui.js"></script>
<script type="text/javascript" src="js/design.js"></script>
<script type="text/javascript" src="js/multiSelect.js"></script>
<script>
    let that;
    new Vue({
        el: '#app',
        data: function () {
            return {
                relationList: [],
                eduList: [],
                skillListStr: '',
                workList: [],
                currentRow: {},
                orgList: [],
                tableData:[],
                instancedId:'',
                eduOption: [
                    {
                        value: 5,
                        label: '初中'
                    },
                    {
                        value: 1,
                        label: '高中'
                    },
                    {
                        value: 6,
                        label: '中专/中技'
                    },
                    {
                        value: 2,
                        label: '大专'
                    },
                    {
                        value: 3,
                        label: '本科'
                    },
                    {
                        value: 4,
                        label: '硕士及以上'
                    },
                ],
            }
        },
        mounted: function () {
            that = this
            this.selectMainOrgList()
            this.instanceId = getUrlParam();
            $.post('/office/flowStepInstance/queryDetail', {id: this.instanceId}, function (res) {
                if (res.code = 200) {
                    var params = {}
                    params.IdNum = res.obj.annex
                    $.get('/office/hrEmployDetail/getInfo', params, function (res) {
                        that.currentRow = res.obj;
                    })
                }
            });
            this.getInstanceProcess();
        },
        methods: {
            handleStatus(row){
                switch (row.status) {
                    case 1:
                        return row.makeFlag == 2 ? '已执行' : '同意';
                    case 2:
                        return row.makeFlag == 2 ? '待执行' : '待审核';
                    case 0:
                        return '不同意';
                    case 3 :
                        return row.makeFlag == 2 ? '待执行' : '待审核';
                    case -1:
                        return '待审核'
                }
                return '未知参数'
            },
            selectMainOrgList() {
                $.get('/office/org/selectMainOrgList', function (res) {
                    that.orgList = res.obj;
                })
            },
            handleAction(row){
               openApprove(row.templateId,row.person)
            },
            getInstanceProcess(){
                $.post('/office/flowStepInstance/queryInstanceAndProcess',{instanceId:this.instanceId},function(res) {
                    that.tableData=res.obj.flowStepApprove.process
                })
            }
        },

    })
</script>
</body>
</html>
